<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
    <head>
        <title>Utbudstjänst</title>
        <meta charset="utf-8">

        <script src="js/sessvars.js"></script>

        <link rel="stylesheet" href="../css/font-awesome.css">
        <link rel="stylesheet" href="../css/bootstrap.css">
        <link rel="stylesheet" href="../css/prism.css">
        <link rel="stylesheet" href="../css/chosen.min.css">
        <link rel="stylesheet" href="../css/bootstrap-responsive.css">
        <link rel="stylesheet" href="../css/datepicker.css">
        <link rel="stylesheet" href="../css/tablesorter.css">
        <link rel="stylesheet" href="../css/jquery.dataTables.css">
        <link rel="stylesheet" href="../css/jquery.tablesorter.pager.css">
        <link rel="stylesheet" href="../css/ui-lightness/jquery-ui-1.8.21.custom.css">
        <link rel="stylesheet" href="../css/application-ocean-breeze.css">
        <link rel="stylesheet" href="../css/dashboard.css">
        <link rel="stylesheet" href="../css/msgGrowl.css" type="text/css" charset="utf-8">
        <link rel="stylesheet" href="../css/jquery.msgbox.css">
        <link rel="stylesheet" href="../css/style.css">

        <script id="detailTemplate" type="text/html">
            <div id="edit-uppdrag" class="hero-unit-compact">
                <h2 class="closeable unmodified"><i class="icon-check-minus modified"></i><span id="title"></span></h2>
                <div class="row-fluid unmodified">
                    <div class="alert">
                        <strong>Du har osparade ändringar!</strong> För att stänga raden måste du <a class="action-save">spara</a> eller <a class="action-cancel">avbryta</a>.
                    </div>
                </div>

                <legend id="titleUppdrag"><i class="icon-medkit"></i> <span id="title"></span></legend>
                <div class="row-fluid">
                    <div class="span12">
                        <div class="control-group">
                            <label>Namn</label>
                            <div class="controls">
                                <input id="name" class="input-xxlarge listen-change" type="text">
                            </div>
                        </div>
                        <div class="control-group">
                            <label>Beskrivning</label>
                            <div class="controls">
                                <textarea id="description" class="input-xxlarge listen-change" rows="3"></textarea>
                            </div>
                        </div>
                        <div class="control-group">
                            <label>Tabell</label>
                            <div class="controls">
                                <table id="table">
                                    <thead>
                                        <td>kolumn 1</td>
                                        <td>kolumn 2</td>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row-fluid">
                    <div class="span12">
                        <div class="pull-right">
                            <button class="btn action-cancel"><i class="icon-remove"></i> Avbryt</button>
                            <button class="btn btn-primary action-save" disabled="disabled"><i class="icon-thumbs-up"></i> Spara</button>
                        </div>
                    </div>
                </div>
            </div>
        </script>

    </head>

    <body>

        <div id="wrapper">

            <div id="headerPlaceholder"></div>
            <div class="row-fluid">
                <div class="span12">
                    <div class="pull-right">
                        <button id="create" class="btn btn-primary"><i class="icon-thumbs-up"></i> Skapa ny</button>
                    </div>
                </div>
            </div>

            <div id="createPlaceholder"></div>

            <!-- Main content -->
            <div id="content">
                <div class="container">
                    <table id ="masterTable" class="table table-hover table-striped">
                        <thead>
                            <tr>                       
                                <th width="35%" class="sortable">Namn</th>
                                <th width="35%" class="sortable">Beskrivning</th>
                                <th width="15%" class="sortable">Status</th>
                                <th width="15%" class="sortable">Senast uppdaterad</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <script src="../js/lib/jquery-1.7.2.min.js"></script>
        <script src="../js/lib/jquery-ui-1.8.21.custom.min.js"></script>
        <script src="../js/lib/jquery.ui.touch-punch.min.js"></script>
        <script src="../js/lib/bootstrap.min.js"></script>
        <script src="../js/populate.js"></script>  
        <script src="../js/Theme.js"></script>
        <script src="../js/lib/bootstrap-datepicker.js"></script>
        <script src="../js/lib/chosen.jquery.min.js"></script>
        <script src="../js/prism.js"></script>
        <script src="../js/lib/msgGrowl.min.js"></script>
        <script src="../js/lib/jquery.tablesorter.min.js"></script>
        <script src="../js/lib/jquery.tablesorter.pager.js"></script>
        <!-- FIXME: Want to use dataTables.min.js but this has been modified!!! -->
        <script src="../js/lib/jquery.dataTables.js"></script>
        <script src="../js/lib/jquery.msgbox.min.js"></script>
        <script src="../js/lib/jquery.cookie.js"></script>
        <script src="../js/lib/jquery-handlebars-1.1.4.min.js"></script>
        <script src="../js/md.js"></script>
        <script>
            $('#content').MasterDetail({
                masterData: [
                    {
                        displayName:    'displayName1',
                        description:    'description1',
                        status:         'ACTIVE',
                        updateTime:     '2014-01-01',
                        name:           'name1'
                    }, {
                        displayName:    'displayName2',
                        description:    'description2description2description2description2description2description2description2description2description2description2description2description2description2description2description2description2',
                        status:         'ACTIVE',
                        updateTime:     '2014-02-02',
                        name:           'name2'
                    }
                ],
                masterColumns: [
                    {
                        mData:      'displayName',
                        mRender:    MasterDetail.renderLink
                    }, {
                        mData:      'description',
                        mRender:    MasterDetail.renderString
                    }, {
                        mData:      'status',
                        mRender:    renderStatus
                    }, {
                        mData:      'updateTime',
                        mRender:    MasterDetail.renderDate
                    }, {
                        mData:      'name',
                        bVisible:   false
                    }
                ],
                initDetail: initDetail,
                createDetail: createDetail,
                updateDetail: updateDetail
            });

            function renderStatus(data, type, full) {
                return data === 'ACTIVE' ? 'Aktiv' : 'Inaktiv';
            }

            function initDetail(container, data) {
                if (data) {
                    $('#title', container).text('Ändra rad');
                    $('#name', container).val(data.name);
                    $('#description', container).val(data.description);
                } else {
                    $('#title', container).text('Skapa ny rad');
                }
                $('#table', container).dataTable({
                    aoColumns: [
                        { mData: 'a' },
                        { mData: 'b' }
                    ],
                    bDeferRender: true,
                    bFilter: false,
                    bDestroy: true,
                    bSortCellsTop: true,
                    bPaginate: false,
                    bInfo: false,
                    aaData: [{a: 'a1', b: 'b1'}, {a: 'a2', b: 'b2'}]
                });
            }

            function createDetail(container) {
                data = {
                    name: $('#name', container).val(),
                    description: $('#description', container).val()
                };
                console.log("Creating data:");
                console.log(data);
            }

            function updateDetail(container) {
                data = {
                    name: $('#name', container).val(),
                    description: $('#description', container).val()
                };
                console.log("Updating data:");
                console.log(data);
            }
        </script>
    </body>
</html>
